<!-- 首页展示内容 -->
<template>
  <div class="main">
    <el-row class="home" :getter="30">
      <!-- 用户信息 -->
      <el-col :span="8" style="margin-top: 20px">
        <el-card shadow="hover">
          <div class="user">
            <img :src="userImg" alt="">
            <div class="userInfo">
              <p class="name">Admin</p>
              <p class="manage">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录时间: <span>2021-06-03</span></p>
            <p>上次登录地点: <span>福州</span></p>
          </div>
          <!-- 销量统计 -->
        </el-card>
        <el-card style="margin-top: 20px">
          <el-table :data="tableData">
            <el-table-column
              show-overflow-tooltip
              v-for="(val, key) in tableLabel"
              :key="key"
              :prop="key"
              :label="val"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!-- 订单统计 -->
      <el-col :span="16" style="margin-top: 20px">
        <div class="num">
          <el-card
            shadow="hover"
            v-for="item in countData"
            :key="item.name"
            :body-style="{padding: 0}"
          >
            <div class="content">
              <i
                class="icon"
                :class="`el-icon-${item.icon}`"
                :style="{background: item.color}"
              ></i>
              <div class="detail">
                <p class="num">￥{{item.value}}</p>
                <p class="txt">￥{{item.name}}</p>
              </div>
            </div>
          </el-card>
        </div>
        <el-card shadow="hover" style="height: 280px; margin: 0 0.5% 0;" >
          <echart :chartData="echartData.order" style="height: 280px"></echart>
        </el-card>
        <div class="graph">
          <el-card shadow="hover" style="height: 260px">
            <echart :chartData="echartData.user" style="height: 240px"></echart>
          </el-card>
          <el-card shadow="hover" style="height: 260px">
            <echart :chartData="echartData.video" :isAxisChart="false" style="height: 240px"></echart>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getHome } from '../../api/data'
import Echart from '@/components/Echarts.vue'
export default {
  components: {
    Echart
  },
  data () {
    return {
      userImg: require('@/assets/images/user.png'),
      tableData: [],
      tableLabel: {
        name: '品牌',
        todaySell: '今日销量',
        monthSell: '本月销量',
        totalSell: '总销量'
      },
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "今日收藏订单",
          value: 223,
          icon: "star-on",
          color: "#ffb980"
        },
        {
          name: "今日未支付订单",
          value: 122,
          icon: "s-goods",
          color: "#5ab1ef"
        },
        {
          name: "本月支付订单",
          value: 122,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "本月收藏订单",
          value: 350,
          icon: "star-on",
          color: "#ffb980"
        },
        {
          name: "本月未支付订单",
          value: 122,
          icon: "s-goods",
          color: "#5ab1ef"
        },
      ],
      echartData: {
        order: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        video: {
          series: []
        }
      }
    }
  },
  methods: {
    getTableData () {
      getHome().then((res) => {
        this.tableData = res.data.tableData

        // 折线图的展示
        const order = res.data.orderData
        const keyArray = Object.keys(order.data[0])

        // 传给组件的值
        this.echartData.order.xData = order.date
        keyArray.forEach((key) => {
          this.echartData.order.series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: 'line'
          })
        })

        // 用户图
        this.echartData.user.xData = res.data.userData.map((item) => item.date)
        this.echartData.user.series.push({
          name: '新增用户',
          data: res.data.userData.map((item) => item.new),
          type: 'bar'
        })
        this.echartData.user.series.push({
          name: '活跃用户',
          data: res.data.userData.map((item) => item.active),
          type: 'bar'
        })

        // 饼状图
        this.echartData.video.series.push({
          data: res.data.videoData,
          type: 'pie'
        })
      })
    }
  },
  mounted () {
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
@import "~@/style/scss/home.scss"
</style>
